<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--1. .stop修饰符的使用（防止按钮冒泡）-->
  <div @click="divClick">
    aaa
    <button @click.stop="btnClick">按钮</button>
  </div>

  <!--2. .prevent修饰符的使用（防止submit原有提交的功能，用自己写的方法提交）-->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

  <!--3. .keyup监听某个键盘的键帽（这里监听enter键的）-->
  <input type="text" @keyup.enter="keyup">

  <!--4. .native监听组件内部的事件-->
  <!--  <cpn @click.native="cpnClick"></cpn>-->

  <!--5. .once修饰符的使用-->
  <button @click.once="onceClick">一次使用</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btnClick() {
        console.log('btn');
      },
      divClick() {
        console.log('div');
      },
      submitClick() {
        console.log('submit');
      },
      keyup() {
        console.log('keyup');
      },
      onceClick() {
        console.log('once');
      }
    }
  })
</script>
</body>
</html>
